<template>
    <div class="gjgztjyfx_wrap">
        <div class="page-content">
            <div class="top-panel">

                <div class="panel-item">
                    <div class="panel-item-title">事件量（件）</div>
                    <!--1-->
                    <div class="panel-item-num">{{ faultTotal | formatData }}<span class="panel-item-icon"></span></div>
                </div>

                <div class="panel-item">
                    <div class="panel-item-title">主告警量（件） </div>
                    <!--2-->
                    <div class="panel-item-num">{{ urgentTotal | formatData }}<span class="panel-item-icon is_fall"></span></div>
                </div>

                <div class="panel-item">
                    <div class="panel-item-title">平均响应时常MTTA</div>
                    <!--3-->
                    <div class="panel-item-num">{{ parseInt( valveState[16442] / 60 ) }}<span class="panel-item-nuit">H</span>{{ parseInt( valveState[16442] % 60 ) }}<span class="panel-item-nuit">MIN</span>
                        <span class="panel-item-icon is_fall"></span>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-item-title">平均处理时长MTTR</div>
                    <!--4-->
                    <div class="panel-item-num">{{ parseInt( valveState[16443] / 60 ) }}<span class="panel-item-nuit">H</span>{{ parseInt( valveState[16443] % 60 ) }}<span class="panel-item-nuit">MIN</span>
                        <span class="panel-item-icon"></span>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-item-title">压缩比</div>
                    <!--5-->
                    <div class="panel-item-num">{{ valveState[16443] | formatFlowValue }}<span class="panel-item-nuit">%</span>
                        <span class="panel-item-icon"></span>
                    </div>
                </div>
            </div>


            <div class="middle-panel">
                <div class="panel-item">
                     <el-tabs v-model="activeName" @tab-click="handleClick">
                         <el-tab-pane label="告警/成员分析" name="0">
                             <div class="content-box" ref="lineChart1"></div>
                         </el-tab-pane>
                         <el-tab-pane label="告警智能分析" name="1">
                             <div class="content-box" ref="lineChart2"></div>
                         </el-tab-pane>
                     </el-tabs>

                    <el-button  size="medium">更多<i class="el-icon-arrow-right"></i></el-button>
                </div>

                <div class="panel-item">
                    <div class="chart-box" ref="pieChart1"></div>
                    <div class="chart-box" ref="pieChart2"></div>
                    <div class="chart-box" ref="pieChart3"></div>
                </div>
            </div>


            <div class="bottom-panel">
                <div class="chart-box" ref="barChart"></div>

            </div>


        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: '0',
                valveState: {},
                faultTotal: 0,
                urgentTotal: 0,
            }
        },
        methods: {
            getData() {
                this.$api.queryLogStatistics({}).then(( res )=> {
                    console.log("getData==>",res);

                    var faultTotal = res.error.total + res.warning.total;
                    var urgentTotal = res.error.urgent + res.warning.urgent;

                    this.pieChartLoad(
                        {
                            value: [
                                { value: res.warning.total, name: '告警', percent: parseInt(res.warning.total/faultTotal *100) +'%', },
                                { value: res.error.total, name: '故障', percent: parseInt(res.error.total/faultTotal *100) +'%', },
                            ],
                            id: 'pieChart1',
                            color: ['#35C759','#2C50EE', ],
                        }
                    );

                    this.pieChartLoad(
                        {
                            value: [
                                { value: res.error.urgent, name: '紧急', percent: parseInt(res.error.urgent/res.error.total *100) +'%', },
                                { value: res.error.important, name: '重要', percent: parseInt(res.error.important/res.error.total *100) +'%', },
                                { value: res.error.secondary, name: '次要', percent: parseInt(res.error.secondary/res.error.total *100) +'%', },
                                { value: res.error.general, name: '提示', percent: parseInt(res.error.general/res.error.total *100) +'%', },
                            ],
                            title: '故障',
                            id: 'pieChart2',
                            color: ['rgba(44,80,238,0.8)','rgba(44,80,238,0.6)','rgba(44,80,238,0.4)','rgba(44,80,238,0.2)', ],
                        }
                    );

                    this.pieChartLoad(
                        {
                            value: [
                                { value: res.warning.urgent, name: '紧急', percent: parseInt(res.warning.urgent/res.warning.total *100) +'%', },
                                { value: res.warning.important, name: '重要', percent: parseInt(res.warning.important/res.warning.total *100) +'%', },
                                { value: res.warning.secondary, name: '次要', percent: parseInt(res.warning.secondary/res.warning.total *100) +'%', },
                                { value: res.warning.general, name: '提示', percent: parseInt(res.warning.general/res.warning.total *100) +'%', },
                            ],
                            title: '告警',
                            id: 'pieChart3',
                            color: ['rgba(93,210,122,0.81)','rgba(93,210,122,0.6)','rgba(93,210,122,0.4)','rgba(93,210,122,0.2)', ],
                        }
                    );

                    this.faultTotal = faultTotal;
                    this.urgentTotal = urgentTotal;
                })
            },

            getTimeData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                16444,
                            ]
                        }
                    ]
                ).then(( res )=> {
                    var data = res[0].result || [];
                    var obj = {};

                    for( var i=0; i<data.length; i++ ) {
                        obj[ data[i].address ] = data[i].value;
                    }

                    this.valveState = obj;
                })
            },

            getLineChartData() {
                this.$api.queryLogStatisWeek({}).then(( res )=> {
                    console.log("getLineChartData==>", res)
                    var keys = ['bms-01','bms-02','bms-03','bms-04','bms-05','bms-06',];
                    var index = '';
                    var value = [
                        [0,0,0,0,0,0],
                        [0,0,0,0,0,0],
                    ];

                    for ( var i=0; i<res.length; i++ ) {
                        index = keys.indexOf( res[i].equip );

                        if( index !== -1 ) {
                            value[0][ index ] = res[i]['last7_0'].error + res[i]['last7_0'].warning;
                            value[1][ index ] = res[i]['last14_7'].error + res[i]['last14_7'].warning;
                        }
                    }


                    this.barChartLoad(
                        {
                            names: ['制氢','燃料电池','储氢罐','压缩机','加氢机','变流器',],
                            value: value,
                            id: 'barChart',
                            legend: ['过去7天告警', '上个周期', ],
                            title: '过去7天告警/上个周期对比',
                        }
                    );

                })
            },

            handleClick(tab, event) {
                if( this.activeName === '1' ) {
                    this.$nextTick(()=> {
                        this.lineChartLoad(
                            {
                                names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                                value: [
                                    [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                                    [203, 133, 250, 130, 129, 130, 110, 150, 193, 200, 280, 149, 203, 280,223, 133, 220, 120, ],
                                    [103, 123, 210, 110, 179, 190, 160, 110, 103, 100, 230, 119, 233, 240,273, 153, 260, 170, ],
                                ],
                                id: 'lineChart2',
                                legend: ['事件', '主告警', '所有告警', ],
                                title: '事件压缩分析（个）',
                            }
                        );
                    })

                    return;
                }

                this.lineChartLoad(
                    {
                        names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                        value: [
                            [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                            [203, 133, 250, 130, 129, 130, 110, 150, 193, 200, 280, 149, 203, 280,223, 133, 220, 120, ],
                            [103, 123, 210, 110, 179, 190, 160, 110, 103, 100, 230, 119, 233, 240,273, 153, 260, 170, ],
                        ],
                        id: 'lineChart1',
                        legend: ['事件', '主告警', '所有告警', ],
                        title: '事件压缩分析（个）',
                    }
                );
            },

            lineChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '1%',
                        textStyle: {
                            color: '#9A9FAF',
                            fontSize: 14,
                        }
                    },
                    grid: {
                        top: '18%',
                        right: '1%',
                        bottom: '3%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '1%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#FFCD03','#35C759','#2C50EE'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#FFCD03',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(255,205,3,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(255,205,3,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#35C759',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(53,199,89,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(53,199,89,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[1],
                        },
                        {
                            name: obj.legend[2],
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[2],
                        },
                    ],
                };

                chart.setOption( option );
            },

            barChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '23%',
                        right: '1%',
                        bottom: '1%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                        },
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#2C50EE','#35C759'],
                    xAxis: [
                        {
                            type: 'category',
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },

            pieChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: 'center',
                        top: '37.5%',
                        textStyle: {
                            color: '#535763',
                            fontSize: 14,
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: obj.value.length > 2 ? 'horizontal' : 'vertical',
                        itemGap: 15,
                        bottom: '16%',
                        left: 'center',
                        icon: 'circle',
                        itemWidth: 8,
                        itemHeight: 8,
                        textStyle: {
                            color: '#535763',
                            fontSize: 14,
                            padding: [3,0,0,5],
                            rich: {
                                a: {
                                    width: 40,
                                    padding: [0,5,0,0]
                                },
                                b: {
                                    align: 'left',
                                    width: 50,
                                    padding: [0,10,0,0]
                                },
                                c: {
                                    width: 30,
                                    align: 'right',
                                },
                            }
                        },
                        formatter: function (name) {
                            let item = {};

                            for( var i=0; i<obj.value.length; i++ ) {
                                if( obj.value[i].name === name ) {
                                    item = obj.value[i];
                                    break;
                                }
                            }

                            if( obj.value.length > 2 ) {
                                let arr = [
                                    '{a|'+ item.name +'}',
                                    '{c|'+ item.percent +'}',
                                ];

                                return arr.join('');
                            }

                            let arr = [
                                '{a|'+ item.name +'}',
                                '{b|'+ item.value +'}',
                                '{c|'+ item.percent +'}',
                            ];
                            return arr.join('');
                        },
                    },
                    color: obj.color,
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['37%', '55%'],
                            center: ['50%', '40%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: obj.value
                        }
                    ]
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.getData();
            this.getTimeData();
            this.getLineChartData();

            this.handleClick();
        }
    }
</script>

<style lang="less">
    .gjgztjyfx_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            /*height: 936px;*/
            /*background-image: url("../../assets/images/gjgztjyfx/img_page.png");*/
            /*background-position: center top;*/
            /*background-repeat: no-repeat;*/
            padding-bottom: 28px;

            >.top-panel {
                width: 100%;
                height: 140px;
                margin-bottom: 28px;
                display: flex;
                justify-content: space-between;

                >.panel-item {
                    height:  100%;
                    width: 294px;
                    background-size: 100% 100%;
                    padding: 27px 0 0 84px;
                    box-sizing: border-box;

                    >.panel-item-title {
                        font-size: 16px;
                        font-weight: 600;
                        color: #535763;
                        line-height: 20px;
                    }

                    >.panel-item-num {
                        font-size: 35px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 45px;
                        margin-top: 15px;

                        .panel-item-nuit {
                            font-size: 20px;
                            margin-left: 3px;
                            margin-right: 5px;
                        }

                        .panel-item-icon {
                            display: inline-block;
                            vertical-align: top;
                            width: 16px;
                            height: 16px;
                            background-image: url("../../assets/images/gjgztjyfx/icon_up.png");
                            background-size: 100% 100%;
                            margin-left: 5px;
                            position: relative;
                            top: 2px;

                            &.is_fall {
                                background-image: url("../../assets/images/gjgztjyfx/icon_down.png");
                            }
                        }
                    }

                    &:nth-of-type( 1 ) {
                        background-image: url("../../assets/images/gjgztjyfx/bg_item_1.png");
                    }

                    &:nth-of-type( 2 ) {
                        background-image: url("../../assets/images/gjgztjyfx/bg_item_2.png");
                    }

                    &:nth-of-type( 3 ) {
                        background-image: url("../../assets/images/gjgztjyfx/bg_item_3.png");
                    }

                    &:nth-of-type( 4 ) {
                        background-image: url("../../assets/images/gjgztjyfx/bg_item_4.png");
                    }

                    &:nth-of-type( 5 ) {
                        background-image: url("../../assets/images/gjgztjyfx/bg_item_5.png");
                    }
                }
            }

            >.middle-panel {
                width: 100%;
                height: 396px;
                margin-bottom: 28px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    width: calc( 50% - 14px );
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 8px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {
                        margin-right: 28px;
                        padding: 17px 40px;
                        position: relative;

                        >.el-tabs {

                            >.el-tabs__header {

                                .el-tabs__item {
                                    height: 55px;
                                    font-size: 16px;
                                    color: #9A9FAF;

                                    &.is-active {
                                        color: #2C50EE;
                                        font-weight: 600;
                                    }
                                }
                            }

                            .content-box {
                                width: 100%;
                                height: 280px;
                                margin-top: 5px;
                            }
                        }

                        >.el-button {
                            position: absolute;
                            right: 40px;
                            top: 17px;
                            padding: 0px;
                            line-height: 34px;
                            width: 76px;

                            >span {
                                font-size: 14px;
                                color: #9A9FAF;

                                >i {
                                    color: #9A9FAF;
                                }
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {

                        >.chart-box {
                            display: inline-block;
                            vertical-align: top;
                            width: calc( 100% / 3 );
                            height: 100%;
                        }
                    }
                }
            }

            >.bottom-panel {
                width: 100%;
                height: 340px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;

                >.chart-box {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
